<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>{{ readOnly ? "查看流程" : $route.query.xmlId ? "编辑流程" : "创建流程" }}</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <page-search>
            <page-search-column class="fixed-column">
                <page-search-item class="right">
                    <el-button type="button" @click="goBack">{{ readOnly ? "返回" : "取消" }}</el-button>
                </page-search-item>
                <page-search-item class="right">
                    <el-button v-if="!readOnly" type="primary" @click="submitFlow">{{ _isCopy || !_isEdit ? "创建并部署" : "修改" }}</el-button>
                </page-search-item>
            </page-search-column>
        </page-search>
        <div class="process-update-container">
            <el-form ref="updateForm" label-position="top" :model="updateForm" :rules="updateFormRules"
                     class="updateForm-container" label-width="120px">
                <el-form-item label="流程名称" prop="name">
                    <el-input v-model="updateForm.name" :disabled="readOnly" placeholder="请输入流程名称"></el-input>
                </el-form-item>
                <el-form-item label="流程描述" prop="description">
                    <el-input type="textarea" v-model="updateForm.description" :disabled="readOnly" :rows="3" :maxlength="200" placeholder="请输入流程描述"></el-input>
                </el-form-item>
            </el-form>
            <p class="title">流程设计</p>
            <flow-chart :id="$route.query.xmlId" :readOnly="readOnly" ref="flowChart"/>
        </div>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import FlowChart from "./components/flow-chart/index.vue";

@Component({
    name: "ProcessUpdateNotAlive",
    components: {
        FlowChart
    }
})
export default class ProcessUpdate extends Vue {
    updateForm = {
        // 流程名称
        name: "",
        // 流程描述
        description: ""
    }

    // 是否是查看
    readOnly = false

    updateFormRules = {
        name: [
            { required: true, message: '请输入流程名称', trigger: 'blur' },
            { max: 50, message: '最多输入50个字符', trigger: 'blur' }
        ],
        description: [
            { required: false, message: '最多可输入200个字符', trigger: 'blur' }
        ]
    }

    get _isEdit() {
        return !!this.$route.query.xmlId;
    }

    get _isCopy() {
        return !!this.$route.query.isCopy;
    }

    created() {
        this.readOnly = this.$route.name === "ProcessDetail";
        this.getInfo();
    }

    // 获取详情
    async getInfo() {
        const res = await this.$server["process/getProcessModelInfo"]({
            data: {
                modelId: this.$route.query.modelId
            }
        });
        if (res.data.code === 200) {
            const { name, description } = JSON.parse(res.data.data.metaInfo);
            this.updateForm = {
                name: this._isCopy ? "复制流程-" + name : name,
                description
            };
        }
    }

    goBack() {
        this.$router.go(-1);
    }

    // 提交添加/更新
    submitFlow() {
        (this.$refs.updateForm as any).validate((valid: any) => {
            if (valid) {
                (this.$refs.flowChart as any).submit((flag: any, data: any) => {
                    if (flag) {
                        const { name, description } = this.updateForm;
                        const url = this._isCopy || !this._isEdit ? "process/addProcess" : "process/editProcess";
                        this.$server[url]({
                            data: {
                                name,
                                description,
                                /* eslint-disable */
                                json_xml: data.xml,
                                svg_xml: data.svg,
                                key: data.key,
                                json_customer: JSON.stringify(data.jsonCustomer),
                                /* eslint-enable */
                                definitionId: this._isEdit && !this._isCopy ? this.$route.query.xmlId : undefined,
                                modelId: this.$route.query.modelId || undefined
                            }
                        }).then((res: any) => {
                            if (res.data.code === 200) {
                                this.$message.success(this._isEdit && !this._isCopy ? "修改成功" : "创建成功");
                                this.$router.push({ path: "/process-manage/home" });
                            } else {
                                this.$message.error(res.data.message);
                            }
                        }).catch();
                    }
                });
            }
        });
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: calc(100% - 50px) !important;
        background: transparent !important;
    }
}
.process-update-container {
    padding-left: 30px;
    padding-top: 20px;
    background: #fff;
    height: calc(100% - 58px);
    overflow-y: auto;
    .updateForm-container {
        width: 500px;
        ::v-deep {
            .el-form-item__label {
                font-size: 16px;
                font-family: "PingFang SC";
                font-weight: bold;
                line-height: 22px;
                color: #37383a;
                padding-bottom: 20px;
            }
        }
    }
    .title {
        margin: 0;
        font-size: 16px;
        font-family: "PingFang SC";
        font-weight: bold;
        line-height: 22px;
        color: #37383a;
        padding-bottom: 20px;
    }
}
.fixed-column {
    margin-bottom: 10px;
}
</style>
